<template>
	<view class="main-page">
		<view class="header-box">
			<view class="row-container width-100p">
				<image class="avatar" src="../../static/common/ic_avatar_female.png" v-if="customerData.sex == 0"></image>
				<image class="avatar" src="../../static/common/ic_avatar_male.png" v-if="customerData.sex == 1"></image>
				<view class="column-container height-126" style="justify-content: space-between;" >
					<text class="font-333-32 font-weight-600">{{customerData.realName}}</text>
					<view class="row-container mt-4">
						<text class="font-999-26">{{customerData.id}}</text>
						<view class="column-line"></view>
						<text class="font-999-26" v-if="customerData.sex == 1">男</text>
						<text class="font-999-26" v-if="customerData.sex == 0">女</text>
						<view class="column-line"></view>
						<text class="font-999-26">联系电话：{{customerData.mobile}}</text>
					</view>
					<text class="font-999-26 mt-4">注册时间：{{customerData.createTime}}</text>
				</view>
			</view>
		</view>
		
		<view class="record-box">
			<view class="row-container-row-between service-count-box">
				<view class="row-container" style="position: relative;">
					<text class="font-333-36 font-weight-600" style="z-index: 50;">预约记录</text>
					<view class="title-line"></view>
				</view>
				<text class="font-666-28">到店{{customerData.reachCount}}次  |  共计{{customerData.yyCount}}条</text>
			</view>
			
			<view class="column-container width-100p" v-if="recordList.length > 0">
				<view class="data-item"
				v-for="(item , index) in recordList" :key="index">
					<view class="column-container">
						<text class="font-333-32 font-weight-600">{{item.showTimeStr}}</text>
						<text class="font-999-26 mt-8">{{item.deviceName}}</text>
					</view>
					<text class="font-3cb-28" v-if="item.status == 0">预约中</text>
					<text class="font-3cb-28" v-if="item.status == 1">按时到店</text>
					<text class="font-f94-28" v-if="item.status == 2">{{item.cancelMsg}}</text>
				</view>
			</view>
			
			<view class="column-container-center width-100p mt-272" v-else>
				<NoData hint="暂无预约信息"></NoData>
			</view>
			
			
		</view>
		
		
	</view>
</template>

<script>
	import NoData from '../../components/nodata.vue'
	
	export default {
		data() {
			return {
				recordList:[],
				customId:'',
				customerData:{
					id:'',
					realName:'',
					mobile:'',
					createTime:'',
					reachCount:0,
					yyCount:0
				},
				page:1,
				hasMoreData:false
			}
		},
		
		components:{
			NoData
		},
		
		onPullDownRefresh() {
			this.page = 1
			this.loadRecordData()
			this.loadCustomerDetail()
		},
		
		onReachBottom() {
			if (this.hasMoreData){
				this.page ++
				this.loadRecordData()
			}
		},
		
		onLoad(options) {
			this.customId = options.customId
			this.loadCustomerDetail()
			this.loadRecordData()
		},
		
		methods: {
			loadCustomerDetail(){
				if (!this.customId) return
				let that = this
				this.http({
					url:'/user/custom/findDetail',
					method:'POST',
					data:{
						customId : that.customId
					},
					success(res){
						if (res.code == 200){
							that.customerData = res.data
						}
					},
					failed(e){
					}
				})
				
			},
			
			loadRecordData(){
				let that = this
				this.http({
					url:'/yy/custom/findCustomYyList',
					method:'POST',
					data:{
						customId:that.customId,
						pageNo: that.page,
						pageSize: 20
					},
					success(res){
						if (res.code == 200){
							if (that.page == 1){
								that.recordList = res.data
							} else{
								that.recordList = [...that.recordList, ...res.data]
							}
							that.hasMoreData = res.data.length >= 10
						}
						uni.stopPullDownRefresh()
					},
					failed(e){
						uni.stopPullDownRefresh()
					}
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.header-box{
		display: flex;
		flex-direction: column;
		width: calc(100% - 60rpx);
		padding: 30rpx;
		background: white;
		
		.avatar{
			width: 126rpx;
			height: 126rpx;
			margin-right: 24rpx;
		}
		
		.add-btn-box{
			background: #F94C4B;
			width: 100%;
			height: 88rpx;
			margin-top: 30rpx;
			border-radius: 16rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
		}
		
		.column-line{
			width: 1rpx;
			height: 16rpx;
			background: #999999;
			margin: 0rpx 16rpx;
		}
	}
	
	.record-box{
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		margin: 30rpx 0rpx;
		
		.service-count-box{
			width: calc(100% - 60rpx);
			padding: 0rpx 30rpx;
			margin-bottom: 20rpx;
		}
		
		.title-line{
			background: linear-gradient(79.95deg, #EA3D3D 7.53%, rgba(234, 61, 61, 0) 92.47%);
			width: 144rpx;
			height: 10rpx;
			position: absolute;
			bottom: 0rpx;
		}
		
		.data-item{
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			width: calc(100% - 108rpx);
			margin: 0rpx 30rpx;
			padding: 24rpx;
			position: relative;
			background: white;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
		}
	}
	
</style>
